<script setup>
import {onMounted, ref, watch} from "vue";
import {ElButton, ElDialog, ElMessage} from "element-plus";
import { getWorkDetailsAPi } from "@/api/admin/admin"
import eventBus from "@/main.js";


function downloadFile(url) {
  console.log(url)
  // 替换为你的文件URL
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', '');
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

function openPreview() {
  dialogVisible.value = true;
}

//预览文件
const show=(fileUrl)=>{
  console.log(fileUrl)
  window.open(fileUrl)
}

//文件导入
const showFiles = ref(false)

const handleClick = () => {
  showFiles.value = true
}

//视频导入
// 控制Dialog对话框的显示隐藏
const videoDialogVisible = ref(false)



//标题部分


//判断文件名后缀
const docxOrPdf=(url)=>{
  if(typeof url==="string")
  {
    const after=splitStringAfter(url).split('.');
    if (after[after.length-1]==='docx'){
      return true;
    }else {
      return false;
    }
  }

}
// 获取URL中的查询参数部分
const queryParams = window.location.search;

// 解析查询参数字符串
const urlParams = new URLSearchParams(queryParams);

// 获取名为"id"的查询参数的值
const id = urlParams.get('id');
const userId= urlParams.get('userId');
const adminId=urlParams.get('adminId')
onMounted(()=>{
  getWork(id,userId,adminId)
})
const formData=ref({})
const tableData=ref({
  /**
   * 作品名称
   */
   workName:"",

  /**
   * 作品组别
   */
   workTeam:"",

  /**
   * 参加的学校
   */
  joinSchool:"",
  /**
   * 参赛团队
   */
  joinTeam:"",

  /**
   * 创建时间
   */
   createTime:"",


  /**
   * 浏览计数
   */
  browseCount:0,

  /**
   * 课堂实录
   */
  classroomRecording:"",
  /**
   * 专业名称
   */
 workProfessional:"",

  /**
   * 教案
   */
  lessonPlan:"",

  /**
   * 教学实施报告
   */
   teachingReport:"",

  /**
   * 专业人才培养方案
   */
 talentDevelopmentPlan:"",

  /**
   * 课程标准
   */
   courseStandard:"",

  /**
   * 教材选用说明
   */
  textbookSelectionNote:"",

  /**
   * 申请表
   */
   applicationForm:"",

  /**
   * 信息文件
   */
   informationFile:""
})
const getWork=async ()=>{
   await getWorkDetailsAPi({
      id:id,
     userId:userId,
     adminId:adminId
    }).then((res)=>{
        if(res.code===200){
            formData.value=res.data
            sendMessage()
        }else{
          ElMessage.error(res.message||"查询错误")
        }
    }).catch((err)=>{
     ElMessage.error(err.errMsg?err.message:"查询失败")
   })
}
const sendMessage=()=>{
  eventBus.emit('message-updated',1);
}
const loadData=(formData)=>{
  tableData.value={
    ...formData
  }
}
const videoData=ref([])
watch(formData,(newValue)=>{
  loadData(newValue)

  videoData.value=JSON.parse(tableData.value.classroomRecording)

})

const videosData=ref([])
watch(videoData,(newData)=>{

  for (let i = 0; i < newData.length; i++) {
    const newUrl=splitUrlBefore(newData[i])

    videosData.value.push(newUrl)
  }
},{deep:true})

const splitString=(url)=> {
  if (typeof url !== 'string') {
    return
  }
  const startIndex = url.indexOf(":", url.indexOf(":") + 1); // 查找第二个冒号的索引
  const endIndex = url.indexOf(".", startIndex); // 查找点的索引
  return url.substring(startIndex + 1, endIndex); // 使用 substring() 方法
}
const splitUrlBefore=(url)=>{
  if (typeof url === 'string') {
    // 使用 indexOf 寻找第一个冒号的位置
    const firstColonIndex = url.indexOf(':');
    // 使用 indexOf 寻找第二个冒号的位置
    const secondColonIndex = url.indexOf(':', firstColonIndex + 1);
    // 提取第二个冒号前的网址部分
    const extractedUrl = url.substring(0, secondColonIndex);
    return extractedUrl
    // 继续处理 parts
  } else {
  }
}
/**
 * 取出文件名
 * @param url
 * @returns {string}
 */
const splitStringAfter=(url)=>{
  if (typeof url === 'string'){
    const splitIndex = url.lastIndexOf(':');
    return url.substring(splitIndex + 1)
  }else{
  }
}
/**
 * 取出文件地址
 */
const splitStringBefore=(url)=>{
  console.log(url,"url")
  if (typeof url === 'string') {
    const fileUrl=url.split(':')[0]
    console.log(fileUrl)
    return  fileUrl
    // 继续处理 parts
  } else {
  }
}
const videosrc=ref('')
const videoPlay=(VideoSrc)=> {
  videoDialogVisible.value = true
  videosrc.value = VideoSrc
}
const getFileName=(url)=>{
  const fileName=url.split(':')[2]
  console.log(fileName)
  return fileName
}



</script>

<template>
  <div id="app" style="height: 100%;width: 100%">

    <div class="back">

        <!--  标题部分    -->
      <div class="body-text" style="border-top: #4682B4 3px solid;
            display: flex;flex-direction: row;
            padding-bottom: 15px;padding-top: 20px;">
          <div style="border-radius: 5px;margin-right: auto;margin-left: 40px;display: flex;flex-direction: row">
            <img style="width: 300px;border-radius: 5px" src="../assets/worksList.png">

            <div style="display: flex;flex-direction: column;margin-left: 30px">
              <text style="font-size: 25px;font-weight: bolder">{{tableData.workName}}</text>
              <span style="font-size: 13px;margin-top: 7px;">参赛学校：<text class="titleText">{{tableData.joinSchool}}</text></span>
              <span style="font-size: 13px;margin-top: 7px;">参赛老师：<text class="titleText">{{tableData.joinTeam}}</text></span>
              <span style="font-size: 13px;margin-top: 7px;">所属分类：
                <text class="titleText">
                  <template v-if="tableData.workTeam==='1'">
                思政科组
              </template>
              <template v-if="tableData.workTeam==='2'">
                公共基础课程组(不含思政)
              </template>
              <template v-if="tableData.workTeam==='3'">
                专业技能课程一组
              </template>
              <template v-if="tableData.workTeam==='4'">
                专业技能课程二组
              </template>
                </text>
              </span>
              <span style="font-size: 13px;margin-top: 7px;">所属课程：<text class="titleText">{{tableData.workProfessional}}</text></span>
              <span style="font-size: 13px;margin-top: 7px;">创建时间：<text class="titleText">{{tableData.createTime}}</text></span>
              <span style="font-size: 13px;margin-top: 7px;">浏览次数：<text class="titleText">{{tableData.browseCount}}</text></span>
            </div>
          </div>
      </div>
        <!--   内容部分     -->
      <div class="body-text" style="margin-top: 10px">

          <!--    课堂实录      -->
          <div style="margin-right: auto;margin-left:40px;width: 93%;">
            <div class="littleTitle">
                <img class="titleIcon" src="../assets/worksListIcon.png">
                <text style="font-size: large;font-weight: bolder">课堂实录</text>
            </div>
            <el-divider style="width: 100%;margin-top: 10px;margin-bottom: 30px"/>
            <!--   视频       -->
            <div style="display: flex;flex-direction: row;margin-bottom: 30px">
            <!--      视频1         -->
                <div style="display: flex;flex-direction: column" >
                    <div style="display: flex;flex-direction: row;width: 450px;border: black 0px solid;">
                        <text style="font-size: 13px;margin-left: 10px">视频 1</text>
                        <a :href="videosData[0]" style="display: flex;margin-left: auto;padding: 0 0 0 0;margin-top: 1px" class="buttonDIS">
                          <svg style="width: 1em;height: 1em;color: #4682B4;margin-top: 4px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64z"></path></svg>
                          <text  style="font-size: 13px;color: #4682B4;">下载</text>
                        </a>
                    </div>
                    <!--   视频本体   -->
                    <button @click="videoPlay(videosData[0])" class="buttonDIS" style="border: black 0px solid;margin-top: 10px">
                        <video :src="videosData[0]" style="width: 450px"></video>
                    </button>
                  <br>
                </div>

                <div style="display: flex;flex-direction: column" >
                <div style="display: flex;flex-direction: row;width: 450px;border: black 0px solid">
                  <text style="font-size: 13px;margin-left: 10px">视频 2</text>
                  <a :href="videosData[1]" style="display: flex;margin-left: auto;padding: 0 0 0 0;margin-top: 1px" class="buttonDIS">
                    <svg style="width: 1em;height: 1em;color: #4682B4;margin-top: 4px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64z"></path></svg>
                    <text  style="font-size: 13px;color: #4682B4;">下载</text>
                  </a>
                </div>
                <!--   视频本体   -->
                <button @click="videoPlay(videosData[1])" class="buttonDIS" style="border: black 0px solid;margin-top: 10px">
                  <video :src="videosData[1]" style="width: 450px"></video>
                </button>
                <br>
              </div>
            </div>
            <!--   视频       -->
            <div style="display: flex;flex-direction: row;margin-bottom: 30px">

              <div style="display: flex;flex-direction: column" >
                <div style="display: flex;flex-direction: row;width: 450px;border: black 0px solid">
                  <text style="font-size: 13px;margin-left: 10px">视频 3</text>
                  <a :href="videosData[2]" style="display: flex;margin-left: auto;padding: 0 0 0 0;margin-top: 1px" class="buttonDIS">
                    <svg style="width: 1em;height: 1em;color: #4682B4;margin-top: 4px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64z"></path></svg>
                    <text  style="font-size: 13px;color: #4682B4;">下载</text>
                  </a>
                </div>
                <!--   视频本体   -->
                <button @click="videoPlay(videosData[2])" class="buttonDIS" style="border: black 0px solid;margin-top: 10px">
                  <video :src="videosData[2]" style="width: 450px"></video>
                </button>
                <br>
              </div>

              <div style="display: flex;flex-direction: column" >
                <div style="display: flex;flex-direction: row;width: 450px;border: black 0px solid">
                  <text style="font-size: 13px;margin-left: 10px">视频 4</text>
                  <a :href="videosData[3]" style="display: flex;margin-left: auto;padding: 0 0 0 0;margin-top: 1px" class="buttonDIS">
                    <svg style="width: 1em;height: 1em;color: #4682B4;margin-top: 4px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64z"></path></svg>
                    <text  style="font-size: 13px;color: #4682B4;">下载</text>
                  </a>
                </div>
                <!--   视频本体   -->
                <button @click="videoPlay(videosData[3])" class="buttonDIS" style="border: black 0px solid;margin-top: 10px">
                  <video :src="videosData[3]" style="width: 450px"></video>
                </button>
                <br>
              </div>
            </div>
          </div>
        <!--     教案       -->
        <div style="margin-right: auto;margin-left:40px;width: 93%;padding-bottom: 10px">
          <div class="littleTitle">
            <img class="titleIcon" src="../assets/worksListIcon.png">
            <text style="font-size: large;font-weight: bolder">教案</text>
          </div>
          <!--    文件本体      -->
          <div class="littleTitle" style="height: 50px;align-items: center;
          border-top: #D3D3D3 1px solid;background-color: #F5F5F5;
                              margin-top: 10px;margin-bottom: 10px">
            <!--   文件    -->
            <div style="display: flex;flex-direction: row;align-items: center;">
              <!--       图标         -->
              <img v-if="docxOrPdf(getFileName(tableData.lessonPlan))" src="../assets/word.png" class="word">
              <img v-else src="../assets/pdf.png" class="pdf">
              <el-button style="background-color: #F5F5F5;border: 0px;padding-left: 3px;"
                         @click="show(splitUrlBefore(tableData.lessonPlan))">
                {{splitStringAfter(tableData.lessonPlan)}}
              </el-button>
            </div>
            <!--      下载        -->
            <el-button @click="downloadFile(splitUrlBefore(tableData.lessonPlan))" style="display: flex;margin-left: auto;margin-top: 2px;background-color:#F5F5F5;" class="buttonDIS ">
              <svg style="width: 1em;height: 1em;color: #4682B4;margin-top: 4px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64z"></path></svg>
              <a  style="font-size: 13px;color: #4682B4;margin-top: 1px">下载</a>
            </el-button>

            <!--    在线预览        -->
            <el-button @click="show(splitUrlBefore(tableData.lessonPlan))" style="display: flex;margin-top: 2px;background-color:#F5F5F5;margin-right: 20px" class="buttonDIS ">
              <svg style="width: 1em;height: 1em;color: #4682B4;margin-top: 3px;margin-right: 2px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M832 384H576V128H192v768h640zm-26.496-64L640 154.496V320zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32m160 448h384v64H320zm0-192h160v64H320zm0 384h384v64H320z"></path></svg>
              <text style="font-size: 13px;color: #4682B4;margin-top: 1px">在线预览</text>
            </el-button>
          </div>
        </div>


        <!--    教学实施报告       -->
        <div style="margin-right: auto;margin-left:40px;width: 93%;margin-top: 10px">
          <div class="littleTitle">
            <img class="titleIcon" src="../assets/worksListIcon.png">
            <text style="font-size: large;font-weight: bolder">教学实施报告</text>
          </div>
          <!--    文件本体      -->
          <div class="littleTitle" style="height: 50px;align-items: center;
          border-top: #D3D3D3 1px solid;background-color: #F5F5F5;
                              margin-top: 10px;margin-bottom: 10px">
            <!--   文件    -->
            <div style="display: flex;flex-direction: row;align-items: center;">
              <!--       图标         -->
              <img v-if="docxOrPdf(getFileName(tableData.teachingReport))" src="../assets/word.png" class="word">
              <img v-else src="../assets/pdf.png" class="pdf">
              <el-button style="background-color: #F5F5F5;border: 0px;padding-left: 3px;" @click="show(splitUrlBefore(tableData.teachingReport))"> {{splitStringAfter(tableData.teachingReport)}}</el-button>
            </div>

            <!--      下载        -->
            <el-button @click="downloadFile(splitUrlBefore(tableData.teachingReport))" style="display: flex;margin-left: auto;margin-top: 2px;background-color:#F5F5F5;" class="buttonDIS ">
              <svg style="width: 1em;height: 1em;color: #4682B4;margin-top: 4px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64z"></path></svg>
              <a  style="font-size: 13px;color: #4682B4;margin-top: 1px">下载</a>
            </el-button>

            <!--    在线预览        -->
            <el-button @click="show(splitUrlBefore(tableData.teachingReport))" style="display: flex;margin-top: 2px;background-color:#F5F5F5;margin-right: 20px" class="buttonDIS ">
              <svg style="width: 1em;height: 1em;color: #4682B4;margin-top: 3px;margin-right: 2px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M832 384H576V128H192v768h640zm-26.496-64L640 154.496V320zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32m160 448h384v64H320zm0-192h160v64H320zm0 384h384v64H320z"></path></svg>
              <text style="font-size: 13px;color: #4682B4;margin-top: 1px">在线预览</text>
            </el-button>
          </div>
        </div>


        <!--     专业人才培养方案       -->
        <div style="margin-right: auto;margin-left:40px;width: 93%;margin-top: 20px">
          <div class="littleTitle">
            <img class="titleIcon" src="../assets/worksListIcon.png">
            <text style="font-size: large;font-weight: bolder">专业人才培养方案</text>
          </div>
          <!--    文件本体      -->
          <div class="littleTitle" style="height: 50px;align-items: center;
          border-top: #D3D3D3 1px solid;background-color: #F5F5F5;
                              margin-top: 10px;margin-bottom: 10px">
            <!--   文件    -->
            <div style="display: flex;flex-direction: row;align-items: center;">
              <!--       图标         -->
              <img v-if="docxOrPdf(getFileName(tableData.talentDevelopmentPlan))" src="../assets/word.png" class="word">
              <img v-else src="../assets/pdf.png" class="pdf">
              <el-button style="background-color: #F5F5F5;border: 0px;padding-left: 3px;" @click="show(splitUrlBefore(tableData.talentDevelopmentPlan))"> {{splitStringAfter(tableData.talentDevelopmentPlan)}}</el-button>
            </div>

            <!--      下载        -->
            <el-button @click="downloadFile(splitUrlBefore(tableData.talentDevelopmentPlan))" style="display: flex;margin-left: auto;margin-top: 2px;background-color:#F5F5F5;" class="buttonDIS ">
              <svg style="width: 1em;height: 1em;color: #4682B4;margin-top: 4px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64z"></path></svg>
              <a  style="font-size: 13px;color: #4682B4;margin-top: 1px">下载</a>
            </el-button>

            <!--    在线预览        -->
            <el-button @click="show(splitUrlBefore(tableData.talentDevelopmentPlan))" style="display: flex;margin-top: 2px;background-color:#F5F5F5;margin-right: 20px" class="buttonDIS ">
              <svg style="width: 1em;height: 1em;color: #4682B4;margin-top: 3px;margin-right: 2px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M832 384H576V128H192v768h640zm-26.496-64L640 154.496V320zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32m160 448h384v64H320zm0-192h160v64H320zm0 384h384v64H320z"></path></svg>
              <text style="font-size: 13px;color: #4682B4;margin-top: 1px">在线预览</text>
            </el-button>
          </div>
        </div>


        <!--     课程标准       -->
        <div style="margin-right: auto;margin-left:40px;width: 93%;margin-top: 20px">
          <div class="littleTitle">
            <img class="titleIcon" src="../assets/worksListIcon.png">
            <text style="font-size: large;font-weight: bolder">课程标准</text>
          </div>
          <!--    文件本体      -->
          <div class="littleTitle" style="height: 50px;align-items: center;
          border-top: #D3D3D3 1px solid;background-color: #F5F5F5;
                              margin-top: 10px;margin-bottom: 10px">
            <!--   文件    -->
            <div style="display: flex;flex-direction: row;align-items: center;">
              <!--       图标         -->
              <img v-if="docxOrPdf(getFileName(tableData.courseStandard))" src="../assets/word.png" class="word">
              <img v-else src="../assets/pdf.png" class="pdf">
              <el-button style="background-color: #F5F5F5;border: 0px;padding-left: 3px;" @click="show(splitUrlBefore(tableData.courseStandard))"> {{splitStringAfter(tableData.courseStandard)}}</el-button>
            </div>

            <!--      下载        -->
            <el-button @click="downloadFile(splitUrlBefore(tableData.courseStandard))" style="display: flex;margin-left: auto;margin-top: 2px;background-color:#F5F5F5;" class="buttonDIS ">
              <svg style="width: 1em;height: 1em;color: #4682B4;margin-top: 4px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64z"></path></svg>
              <a  style="font-size: 13px;color: #4682B4;margin-top: 1px">下载</a>
            </el-button>

            <!--    在线预览        -->
            <el-button @click="show(splitUrlBefore(tableData.courseStandard))" style="display: flex;margin-top: 2px;background-color:#F5F5F5;margin-right: 20px" class="buttonDIS ">
              <svg style="width: 1em;height: 1em;color: #4682B4;margin-top: 3px;margin-right: 2px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M832 384H576V128H192v768h640zm-26.496-64L640 154.496V320zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32m160 448h384v64H320zm0-192h160v64H320zm0 384h384v64H320z"></path></svg>
              <text style="font-size: 13px;color: #4682B4;margin-top: 1px">在线预览</text>
            </el-button>
          </div>
        </div>


        <!--     其他附件       -->
        <div style="margin-right: auto;margin-left:40px;width: 93%;margin-top: 20px">
          <div class="littleTitle">
            <img class="titleIcon" src="../assets/worksListIcon.png">
            <text style="font-size: large;font-weight: bolder">其他附件</text>
          </div>
          <!--    第一个文件本体      -->
          <div class="littleTitle" style="height: 50px;align-items: center;
          border-top: #D3D3D3 1px solid;background-color: #F5F5F5;
                              margin-top: 10px;">
            <!--   文件    -->
            <div style="display: flex;flex-direction: row;align-items: center;">
              <!--       图标         -->
              <img v-if="docxOrPdf(getFileName(tableData.textbookSelectionNote))" src="../assets/word.png" class="word">
              <img v-else src="../assets/pdf.png" class="pdf">
              <el-button style="background-color: #F5F5F5;border: 0px;padding-left: 3px;" @click="show(splitUrlBefore(tableData.textbookSelectionNote))"> {{splitStringAfter(tableData.textbookSelectionNote)}}</el-button>
            </div>
            <!--      下载        -->
            <el-button @click="downloadFile(splitUrlBefore(tableData.textbookSelectionNote))" style="display: flex;margin-left: auto;margin-top: 2px;background-color:#F5F5F5;" class="buttonDIS ">
              <svg style="width: 1em;height: 1em;color: #4682B4;margin-top: 4px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64z"></path></svg>
              <a  style="font-size: 13px;color: #4682B4;margin-top: 1px">下载</a>
            </el-button>

            <!--    在线预览        -->
            <el-button @click="show(splitUrlBefore(tableData.textbookSelectionNote))" style="display: flex;margin-top: 2px;background-color:#F5F5F5;margin-right: 20px" class="buttonDIS ">
              <svg style="width: 1em;height: 1em;color: #4682B4;margin-top: 3px;margin-right: 2px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M832 384H576V128H192v768h640zm-26.496-64L640 154.496V320zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32m160 448h384v64H320zm0-192h160v64H320zm0 384h384v64H320z"></path></svg>
              <text style="font-size: 13px;color: #4682B4;margin-top: 1px">在线预览</text>
            </el-button>
          </div>
          <!--    第二个文件本体      -->
          <div class="littleTitle" style="height: 50px;align-items: center;
          border-top: #D3D3D3 0px solid;background-color: #F5F5F5;
                              ">
            <!--   文件    -->
            <div style="display: flex;flex-direction: row;align-items: center;">
              <!--       图标         -->
              <img v-if="docxOrPdf(getFileName(tableData.applicationForm))" src="../assets/word.png" class="word">
              <img v-else src="../assets/pdf.png" class="pdf">
              <el-button style="background-color: #F5F5F5;border: 0px;padding-left: 3px;" @click="show(splitUrlBefore(tableData.applicationForm))"> {{splitStringAfter(tableData.applicationForm)}}</el-button>
            </div>
            <!--      下载        -->
            <el-button @click="downloadFile(splitUrlBefore(tableData.applicationForm))" style="display: flex;margin-left: auto;margin-top: 2px;background-color:#F5F5F5;" class="buttonDIS ">
              <svg style="width: 1em;height: 1em;color: #4682B4;margin-top: 4px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64z"></path></svg>
              <a  style="font-size: 13px;color: #4682B4;margin-top: 1px">下载</a>
            </el-button>

            <!--    在线预览        -->
            <el-button @click="show(splitUrlBefore(tableData.applicationForm))" style="display: flex;margin-top: 2px;background-color:#F5F5F5;margin-right: 20px" class="buttonDIS ">
              <svg style="width: 1em;height: 1em;color: #4682B4;margin-top: 3px;margin-right: 2px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M832 384H576V128H192v768h640zm-26.496-64L640 154.496V320zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32m160 448h384v64H320zm0-192h160v64H320zm0 384h384v64H320z"></path></svg>
              <text style="font-size: 13px;color: #4682B4;margin-top: 1px">在线预览</text>
            </el-button>
          </div>

          <!--    第三个文件本体      -->
          <div class="littleTitle" style="height: 50px;align-items: center;
          border-top: #D3D3D3 0px solid;background-color: #F5F5F5;
                              ">
            <!--   文件    -->
            <div style="display: flex;flex-direction: row;align-items: center;">
              <!--       图标         -->
              <img v-if="docxOrPdf(getFileName(tableData.informationFile))" src="../assets/word.png" class="word">
              <img v-else src="../assets/pdf.png" class="pdf">
              <el-button style="background-color: #F5F5F5;border: 0px;padding-left: 3px;" @click="show(splitUrlBefore(tableData.informationFile))"> {{splitStringAfter(tableData.informationFile)}}</el-button>
            </div>

            <!--      下载        -->
            <el-button @click="downloadFile(splitUrlBefore(tableData.informationFile))" style="display: flex;margin-left: auto;margin-top: 2px;background-color:#F5F5F5;" class="buttonDIS ">
              <svg style="width: 1em;height: 1em;color: #4682B4;margin-top: 4px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64z"></path></svg>
              <a  style="font-size: 13px;color: #4682B4;margin-top: 1px">下载</a>
            </el-button>

            <!--    在线预览        -->
            <el-button @click="show(splitUrlBefore(tableData.informationFile))" style="display: flex;margin-top: 2px;background-color:#F5F5F5;margin-right: 20px" class="buttonDIS ">
              <svg style="width: 1em;height: 1em;color: #4682B4;margin-top: 3px;margin-right: 2px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M832 384H576V128H192v768h640zm-26.496-64L640 154.496V320zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32m160 448h384v64H320zm0-192h160v64H320zm0 384h384v64H320z"></path></svg>
              <text style="font-size: 13px;color: #4682B4;margin-top: 1px">在线预览</text>
            </el-button>
          </div>
        </div>

        <!--     视频播放       -->
        <el-dialog style="background-color: black;margin-top: 40px" v-model="videoDialogVisible"  :close-on-click-modal="false" destroy-on-close>
          <template #footer>
            <video ref="vueMiniPlayer" controls autoplay :src="videosrc" style="width: 100%;height: 100%"/>
          </template>
        </el-dialog>
      </div>
      <!-- 底部 -->
      <div class="black-bottom">
        <text class="black-text" style="margin-top: 12px;" >如有使用问题，请联系唐工：17856424152</text>
        <text class="black-text" style="margin-bottom: 12px;" >Copyright ? 2003-2024 zhihuijiaoxue. All rights reserved.</text>
      </div>
    </div>
  </div>
</template>

<style scoped>


a:link {color:#000000;}
a:visited {color:#000000;}
a:hover {background-color:#F5F5F5;color: #678afd;}

.pdf{
  margin-right: 5px;
  margin-left: 10px;
  width: 36px;
  height: 36px;
}

.word{
  width: 40px;
  height: 40px;
  margin-right: 5px;
  margin-left: 10px;
}


.buttonDIS{
  border: 0px solid;background-color: white;
  border-radius: 5px;
}


.titleIcon{
  margin-top: 4px;
  width: 20px;
  height: 20px;
  margin-right: 6px;
}


.littleTitle{
  display: flex;
  flex-direction: row;

}

.titleText{
  font-size: 13px;
  font-weight: bolder;

}


.example-showcase .el-dropdown-link {

  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.bottom{
  margin-top: 80px;
  padding-top: 18px;
  padding-bottom: 18px;
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.black-text{

  color:#afafaf;
  font-size: 11px;

}

.black-bottom{
  margin-top: 20px;
  background-color: black;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}




.body-text{
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 3%;
  padding-bottom: 3%;
  margin-left: 15%;
  margin-right: 15%;

}

.back{
  width:100%;
  padding-top: 1.2%;
  background: #ececec;
}

.menu{
  overflow: hidden;
  width: 580px;
}
.top{

  border-bottom: 2px solid;
  border-bottom-color: #D3D3D3;
  display: flex;
  width: 100%;
  height: 60px;
}

.icon{


  margin-left: 240px;
  margin-right: 35px;
}

.el-menu-popper-demo{
  transform: rotateX(180deg);
}

.top-text{
  transform: rotateX(180deg);
}

.top-button{

  margin-top: 10px;
  margin-left: 50px;
}
</style>